<template>
<div class="admin-storage-settings views-container">
    <div class="wlm-form">
        <div class="wlm-form-hearder flex-row flex-justify-b">
            <span>远程存储</span>
        </div>
        <el-radio-group class="wlm-form-header-radio" v-model="formFormatData.formData.default" @change="resetFieldChange">
            <div class="wlm-form-notice warning" style="margin-left: -41px;margin-top: -10px;">
                <div>
                    温情提示：推荐使用远程存储，将降低服务器加载图片的压力，提升系统的运行加载速度
                </div>
            </div>
            <el-radio label="local">本地存储</el-radio>
            <el-radio label="aliyun">阿里云OSS</el-radio>
            <el-radio label="qcloud">腾讯COS</el-radio>
        </el-radio-group>
        <section v-if="formFormatData.formData.default === 'aliyun'">
            <div class="wlm-form-content">
                <el-form ref="aliyun" :model="formFormatData.formData.engine.aliyun" size="small" label-width="140px" class="retail-form" label-position="right">
                    <el-form-item label="Access Key" prop="access_key_id" :rules="{required: true, message: 'Access Key不能为空', trigger: 'blur'}">
                        <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.aliyun.access_key_id">
                        </el-input>
                        <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.aliyun.access_key_id)}}</span>
                        <div class="form-help">Access Key ID是您访问阿里云API的密钥。</div>
                    </el-form-item>
                    <el-form-item label="Secret Key" prop="access_key_secret" :rules="{required: true, message: 'Secret Key不能为空', trigger: 'blur'}">
                        <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.aliyun.access_key_secret">
                        </el-input>
                        <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.aliyun.access_key_secret)}}</span>
                        <div class="form-help">Access Key Secret是您访问阿里云API的密钥。</div>
                    </el-form-item>
                    <el-form-item label="存储空间 (bucket)" prop="bucket" :rules="{required: true, message: 'bucket不能为空', trigger: 'blur'}">
                        <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.aliyun.bucket">
                        </el-input>
                        <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.aliyun.bucket)}}</span>
                        <div class="form-help">空间名称</div>
                    </el-form-item>
                    <el-form-item label="自定义URL" prop="domain" :rules="{required: true, message: '访问url不能为空', trigger: 'blur'}">
                        <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.aliyun.domain">
                        </el-input>
                        <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.aliyun.domain)}}</span>
                        <div class="form-help">请以HTTPS开头</div>
                    </el-form-item>
                </el-form>
            </div>
        </section>
        <section v-if="formFormatData.formData.default === 'qcloud'">
            <div class="wlm-form-content">
                <el-form ref="qcloud" :model="formFormatData.formData.engine.qcloud" size="small" label-width="140px" class="retail-form" label-position="right">
                    <el-form-item label="Secret ID" prop="secret_id" :rules="{required: true, message: 'Secret ID不能为空', trigger: 'blur'}">
                        <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.secret_id">
                        </el-input>
                        <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.secret_id)}}</span>
                    </el-form-item>
                    <el-form-item label="Secret Key" prop="secret_key" :rules="{required: true, message: 'Secret Key不能为空', trigger: 'blur'}">
                        <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.secret_key">
                        </el-input>
                        <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.secret_key)}}</span>
                    </el-form-item>
                    <el-form-item label="存储空间 (bucket)" prop="bucket" :rules="{required: true, message: 'bucket不能为空', trigger: 'blur'}">
                        <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.bucket">
                        </el-input>
                        <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.bucket)}}</span>
                        <div class="form-help">空间名称</div>
                    </el-form-item>
                    <el-form-item label="地域" prop="region" :rules="{required: true, message: 'App ID不能为空', trigger: 'blur'}">
                        <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.region">
                        </el-input>
                        <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.region)}}</span>
                        <div class="form-help">请填写地域简称，例如：ap-beijing、ap-hongkong、eu-frankfurt</div>
                    </el-form-item>
                    <el-form-item label="访问url" prop="domain" :rules="{required: true, message: '访问url不能为空', trigger: 'blur'}">
                        <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.domain">
                        </el-input>
                        <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.domain)}}</span>
                        <div class="form-help">请以HTTPS开头</div>
                    </el-form-item>
                </el-form>
            </div>
        </section>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit" type="primary">保存</el-button>
    </div>
</div>
</template>

<script>
import {
  setData,
  storageSet
} from '@/api/setting'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'AdminStorageSettings',
  components: {

  },
  directives: {

  },
  computed: {
    hideStar(item) {
      return (item) => {
        const strArr = item.split('')
        const result = []
        if (strArr.length > 9) {
          strArr.map((item, index) => {
            if (index < 4 || index >= strArr.length - 4) {
              result.push(item)
            } else {
              result.push('*')
            }
          })
          return result.join('')
        } else {
          return item
        }
      }
    }
  },
  data() {
    return {
      accessShow: false,
      formFormatData: {
        key: ['aliyun', 'qcloud'],
        api: {
          editForm: {
            api: setData,
            params: {
              always: true,
              key: 'storageSet'
            }
          },
          submitForm: storageSet
        },
        formData: {
          default: 'aliyun',
          engine: {
            aliyun: {
              access_key_id: '',
              access_key_secret: '',
              bucket: '',
              domain: ''
            },
            qcloud: {
              region: '',
              secret_id: '',
              secret_key: '',
              bucket: '',
              domain: ''
            }
          }
        },
        rules: {

        }
      }
    }
  },
  methods: {
    resetFieldChange() {
      if (this.formFormatData.formData.default !== 'aliyun') {
        this.clearValidate()
      }
    }
  }
}
</script>

<style lang="scss">
.beforeText {
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    height: 32px;
    line-height: 32px;
    min-width: 270px;
    padding: 0 15px;
}
</style>
